游戏显示屏模板
<template>
    <div id="#sorketVivw">
        <div class="tabelTop">
				<h6>{{center.name}}</h6>
				<!-- 闹钟倒计时 -->
				<div class="times">
					<!-- 圆圈 -->
					<canvas v-timeCan="center.time" width="29px" height="29px" style="border-radius:50%;"></canvas>
					<!-- 计数 -->
					<li >{{center.time}}</li>
				</div>
				<p class="allMoney">桌面上的筹码:{{center.allMoney}}</p>
			</div>
			<div class="nx">
				<div class="vivwShow" @mouseover="BriefTbale=true" @mouseout="BriefTbale=false" >
					<!-- 路单画布 -->
					<ludan  class="LuDanCanvas" :date="center.current!==false"></ludan>
					<!-- 结算中 -->
					<transition enter-active-class="animated bounceInDown">
						<div class="OverVivw"  v-show="center.current=='login'">
							<div class="toOver"></div>		
						</div>
					</transition>
					<!-- 洗牌中 -->
					<transition enter-active-class="animated bounceInDown">
						<div class="OverVivw" v-show="center.current===false">
							<div class="toLogin"></div>		
						</div>
					</transition>
					<!-- 选择进入倍数房间列表 -->
					<transition enter-active-class="animated flipInX">
						<div class="BriefContent" v-show="BriefTbale&&center.current!==false">
							<a :href="center.room==1?'./gameCenterSingle.html':'./gameCenter.html'" v-for="gameTbale in center.game">
								<p>最低：<span>{{gameTbale.min}}</span></p>
								<p>最高：<span>{{gameTbale.max}}</span></p>
							</a>
						</div>
					</transition>
				</div>
				<div class="vivwFloor">
					<p><span>总人数：{{center.people}}</span></p>
					<p class="banker">
						<span>庄</span>{{center.banker}}
					</p>
					<p class="banker2">
						<span>闲</span>
					</p>
					<p class="banker3">
						<span>和</span>
					</p>
					<p class="goGame" @click="BriefTbale=true"></p>
				</div>
			</div>
    </div>
</template>
// <script>
import ludan from "@/components/gameTable/ludan.vue"
export default {
    name:"vx",
    props: ['center', "keys"],
    data: function () {
        return {
            ulTop: 0,
            BriefTbale: false,
            canvasBox: { x: 0, y: 0 },
            can:null
        };
    },
    directives: {
        timeCan: {
            bind: function (x, bind) {
                var star = bind.value * -6;
                var canvas = x.getContext("2d");
                // 创建渐变线条资源 
                canvas.strokeStyle = "#d6b938";
                canvas.fillStyle = "transparent";
                canvas.lineWidth = 4;
                // 绘制
                // 原型边框
                canvas.arc(14.5, 14.5, 14.5, -90 * Math.PI / 180, (star - 90) * Math.PI / 180, true);
                canvas.fill();
                canvas.stroke();
                // console.log(this);
                // this.can = canvas;
            },
            update: function (x, bind) {
                if (bind.oldValue != bind.value) {
                    var star = bind.value * -6;
                    var canvas = x.getContext("2d");
                    canvas.clearRect(0, 0, 29, 29);
                    canvas.beginPath();
                    // 创建渐变线条资源
                    canvas.strokeStyle = "#d6b938";
                    canvas.fillStyle = "transparent";
                    canvas.lineWidth = 4;
                    // 绘制
                    // 原型边框
                    canvas.arc(14.5, 14.5, 14.5, -90 * Math.PI / 180, (star - 90) * Math.PI / 180, true);
                    canvas.fill();
                    canvas.stroke();
                }
            }
        }
    },
    components: { 
        ludan
    },
    mounted: function () {
        var _this = this;
        this.canvasBox.x = document.getElementsByClassName('vivwShow')[0].clientWidth;
        this.canvasBox.y = document.getElementsByClassName('vivwShow')[0].clientHeight;
        if (this.keys != 3) {
            setInterval(function () {
                if (_this.center.time == 0) {
                    _this.center.time = 60;
                }
                else if (_this.center.time == 56) {
                    _this.center.current = _this.center.current !== false ? 1 : false;
                    _this.center.time--;
                }
                else if (_this.center.current === false) {
                    return false;
                }
                else {
                    _this.center.time--;
                    if (_this.center.time == 0) {
                        _this.center.current = _this.center.current !== false ? 'login' : false;
                    }
                }
            }, 1000);
        }
    }

}
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
    .tabelTop{
	width: 100%;
	height: 35px;
	background: #231f1f;
	position: relative;
}
.tabelTop h6{
	color: #fff;
	height: 35px;
	line-height: 35px;
	font-size: 17px;
	font-weight: 550;
	padding-left: 6px;
}
.tabelTop .times{
	width: 29px;
	height: 29px;
	border-radius: 50%;
	position: absolute;
	left: 161px;
	top: 3px;
	background: -webkit-gradient(linear,left top, left bottom,from(#2d2a2d),color-stop(#4b474a),to(#2d2a2d));
	background: -webkit-linear-gradient(#2d2a2d,#4b474a,#2d2a2d);
	background: -o-linear-gradient(#2d2a2d,#4b474a,#2d2a2d);
	background: linear-gradient(#2d2a2d,#4b474a,#2d2a2d);
	overflow: hidden;
}
.tabelTop .times ul{
	position: absolute;
}
.tabelTop .times li{
	width: 29px;
	height: 29px;
	text-align: center;
	font-size: 15px;
	color: #fff;
	line-height: 29px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
}
.tabelTop .allMoney{
	height: 35px;
	width: 156px;
	line-height: 35px;
	color: #b5b4b4;
	font-size: 15px;
	position: absolute;
	right: 10px;
	top: 0px;
}
.nx{
	height: 226px;
	padding: 10px;
	padding-bottom: 0px;
}
.nx .vivwShow .BriefContent{
	width: 100%;
	height: 100%;
	position: absolute;
    top: 0px;
    left: 0px;
    background: url();
	z-index: 3;
}
.nx .vivwShow .BriefContent a{
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	font-size: 20px;
	color: #ffff6b;
	width: 100%;
	height: 30%;
}

.nx .vivwShow .BriefContent a:hover{
	background: -webkit-gradient(linear,left top, right top,from(transparent),color-stop(#90731b),to(transparent));
	background: -webkit-linear-gradient(left,transparent,#90731b,transparent);
	background: -o-linear-gradient(left,transparent,#90731b,transparent);
	background: linear-gradient(to right,transparent,#90731b,transparent);
}
.nx .vivwShow .BriefContent a p{
	-webkit-box-flex: 0.5;
	    -ms-flex: 0.5;
	        flex: 0.5;
	font-family: 黑体;
	padding-left: 85px;
}
.nx .vivwShow .BriefContent a p span{
	font-weight: 700;
	font-family: 微软雅黑
}
.nx .vivwShow{
	width: 100%;
	height: 196px;
	background-size: 100% 100%;
	position: relative;
	overflow: hidden;
	/* background:#fff; */
}
.nx .vivwShow .LuDanCanvas{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: 1px solid #fcc900;
}
.nx .vivwShow .OverVivw{
	width: 100%;
	height: 100%;
	background: url();
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
}
.nx .vivwShow .OverVivw .toOver{
	width: 100%;
	height: 100%;
	background: url() no-repeat center;
	position: relative;
	z-index: 2;
}
.nx .vivwShow .OverVivw .toLogin{
	width: 100%;
	height: 100%;
	background: url(../../../static/img/toLogin.png) no-repeat center;
}
.nx .vivwFloor{
	height: 30px;
	width: 100%;
	position: relative;

}
.nx .vivwFloor p{
	min-width: 72px;
	height: 30px;
	font-size: 12px;
	color: #dbc6ad;
	float: left;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:start;
	    -ms-flex-pack:start;
	        justify-content:flex-start
}
.nx .vivwFloor p span{
	color: #bcbcbc;
}
.nx .vivwFloor .banker span{
	display: block;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	background: #e0001a;
	color: #fff;
	line-height: 22px;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	margin-left: 4px;
}
.nx .vivwFloor .banker2 span{
	display: block;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	background: #3735f3;
	color: #fff;
	line-height: 22px;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	margin-left: 4px;
}
.nx .vivwFloor .banker3 span{
	display: block;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	background: #369b03;
	color: #fff;
	line-height: 22px;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	margin-left: 4px;
}
.nx .vivwFloor .goGame{
	width: 94px;
	height: 28px;
	cursor: pointer;
	background: url();
	float: right;
	margin-right: 6px;
	margin-top: 1px;
}
#F{
	width: 118px;
	border-top: 1px solid #877352;
	border-bottom:1px solid #372312;
}
</style>

